<template>
    <el-form ref="ruleForm" :model="ruleForm" label-width="80px">
        <el-form-item :label="$t('m.label.date')" prop="time" label-width="40px">
            <datePicker
                :form="ruleForm"
                formId="time"
                startTime="startTime"
                endTime="endTime"
                valueformat="yyyy-MM-dd HH:mm:ss"
                size="small"
            ></datePicker>
        </el-form-item>
        <el-form-item :label="$t('m.label.BU')" prop="buIds" label-width="50px">
            <BU
                :form="ruleForm"
                formId="buIds"
                :multiple="true"
                addSize="mini"
                @selectAll="getCategory"
                @selectDel="getCategory"
                size="small"
            ></BU>
        </el-form-item>
        <el-form-item :label="$t('m.label.productCategory')" prop="findByBuId">
            <category
                ref="category"
                :form="ruleForm"
                formId="findByBuId"
                formBU="buIds"
                :multiple="true"
                @selectAll="getProduct"
                @selectDel="getProduct"
                addSize="mini"
                size="small"
            ></category>
        </el-form-item>
        <el-form-item :label="$t('m.label.productModelNumber')" prop="productIds">
            <product
                ref="product"
                formId="productIds"
                formBU="buIds"
                formCategory="findByBuId"
                :form="ruleForm"
                :multiple="true"
                @selectAll="getASIN"
                @selectDel="getASIN"
                addSize="mini"
                size="small"
            ></product>
        </el-form-item>
        <el-form-item :label="$t('m.label.ASIN')" prop="asinIds" label-width="50px">
            <ASIN
                ref="ASIN"
                formId="asinIds"
                formBU="buIds"
                formCategory="findByBuId"
                formProduct="productIds"
                :form="ruleForm"
                :multiple="true"
                @selectAll="getReverse"
                @selectDel="getReverse"
                addSize="mini"
                size="small"
            ></ASIN>
        </el-form-item>
        <el-form-item :label="$t('m.label.country')" prop="countryIds" label-width="50px">
            <country
                :form="ruleForm"
                formId="countryIds"
                :multiple="true"
                addSize="mini"
                size="small"
            ></country>
        </el-form-item>
        <!-- <el-form-item label="评价分数" prop="starRate">
            <el-select
                v-model="ruleForm.starRate"
                placeholder="请选择STARS"
                size="small"
                :multiple="true"
                collapse-tags
                filterable
                :clearable="true"
            >
                <allAddDelSelect
                    :selectForm="ruleForm"
                    :selectArray="starRateList"
                    selectFormId="starRate"
                    selectArrayId="fraction"
                    size="mini"
                ></allAddDelSelect>
                <el-option :label="item.label" :value="item.fraction" v-for="item in starRateList" :key="item.fraction"></el-option>
            </el-select>
        </el-form-item> -->
        <el-form-item :label="$t('m.label.principal')" prop="chargeMans" label-width="65px">
            <el-select
                v-model="ruleForm.chargeMans"
                filterable
                multiple
                collapse-tags
                :placeholder="$t('m.placeholder.selectPrincipal')"
                size="small"
            >
                <allAddDelSelect
                    :selectForm="ruleForm"
                    :selectArray="findChargeMan"
                    selectFormId="chargeMans"
                    size="mini"
                ></allAddDelSelect>
                <template v-for="(item,index) in findChargeMan">
                    <el-option :key="index" :label="item" v-if="item" :value="item"></el-option>
                </template>
            </el-select>
        </el-form-item>
        <el-form-item label-width="0">
            <el-button
                type="primary"
                @click="submitForm('ruleForm')"
                icon="el-icon-search"
                size="small"
            >{{$t('m.button.search')}}</el-button>
            <el-button
                @click="resetForm('ruleForm')"
                icon="el-icon-circle-close"
                size="small"
            >{{$t('m.button.reset')}}</el-button>
            <download
                ref="download"
                :allColumns="column"
                :title="$t('m.excel.badReview')"
                @getDataxlsx="getDataxlsx"
                size="small"
            ></download>
        </el-form-item>
    </el-form>
</template>
<script>
import { getTable } from "./http";
import { getWeekDate } from "assets/js/date";
import {
    BU,
    category,
    product,
    ASIN,
    country,
    datePicker
} from "components/searchfor";
const ERR_OK = 200;
export default {
    data() {
        return {
            ruleForm: {
                time: getWeekDate("yyyy-MM-dd hh:mm:ss"),
                startTime: getWeekDate("yyyy-MM-dd hh:mm:ss")[0],
                endTime: getWeekDate("yyyy-MM-dd hh:mm:ss")[1],
                buIds: [],
                findByBuId: [],
                productIds: [],
                asinIds: [],
                countryIds: [],
                chargeMans: []
            },
            starRateList: [
                {
                    fraction: 1,
                    label: "一星"
                },
                {
                    fraction: 2,
                    label: "二星"
                },
                {
                    fraction: 3,
                    label: "三星"
                }
            ],
            findChargeMan: [],
            column: []
        };
    },
    created() {
        this.getFindChargeMan();
        this.$emit("submitForm", this.ruleForm);
    },
    methods: {
        getColumns(val) {
            this.column = JSON.parse(JSON.stringify(val));
            this.column.splice(5, 0,{
                label:this.$t('m.label.reviewTitle'),
                property:'reviewTitle'
            })
            console.log( this.column)
        },
        getCategory() {
            this.$refs.category.getCategory();
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
        },
        getProduct() {
            this.$refs.category.getCategory(true);
            this.$refs.product.getProduct();
            this.$refs.ASIN.getASIN();
        },
        getASIN() {
            this.$refs.product.getProduct(true);
            this.$refs.ASIN.getASIN();
        },
        getReverse() {
            this.$refs.ASIN.getASIN(true);
        },
        // 获取负责人
        getFindChargeMan() {
            this.$ajax
                .get(
                    this.GLOBAL.reviewMonitoringService +
                        "/tracking/findChargeMan"
                )
                .then(res => {
                    if (res.data.code === ERR_OK) {
                        this.findChargeMan = res.data.data.data;
                        this.ruleForm.chargeMans = this.ruleForm.chargeMans.filter(
                            item =>
                                !this.findChargeMan.every(ele => ele !== item)
                        );
                    }
                });
        },
        //下载
        getDataxlsx() {
            getTable(this.ruleForm).then(res => {
                if (res.data.code === ERR_OK) {
                    this.$refs.download.getDataXlsx(res.data.data.data);
                } else {
                    this.$message.error(res.data.msg);
                }
            });
        },
        submitForm(formName) {
            this.$emit("submitForm", this.ruleForm);
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.getCategory();
        }
    },
    components: {
        BU,
        category,
        product,
        ASIN,
        country,
        datePicker,
        allAddDelSelect: resolve =>
            require(["components/searchfor/allAddDelSelect.vue"], resolve),
        download: resolve => require(["components/xlsx/xlsx.vue"], resolve),
        allAddDelSelect: resolve =>
            require(["components/searchfor/allAddDelSelect.vue"], resolve)
    }
};
</script>
<style lang="stylus" scoped>
.el-form-item {
    display: inline-block;
    margin-bottom: 0;

    .el-select {
        max-width: 180px;
    }

    .el-range-editor.el-input__inner {
        max-width: 230px;
    }
}

.el-button {
    margin-left: 10px;
}
</style>